<template>
  <div>
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item
        disabled=""
        v-model="value1"
        :options="option1"
        title="综合"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        title="价格"
        @change="fun()"
      />
      <van-dropdown-item v-model="value3" :options="option3" title="分类" />
    </van-dropdown-menu>
    <!-- 商品部分 -->
    <div class="product">
      <div
        class="pro_img"
        v-for="(v, k) in NewTipsList"
        :key="k"
        @click="toDetails(v.id)"
      >
        <img :src="v.list_pic_url" alt="" />
        <div class="pro_content">
          <p class="p1">{{ v.name }}</p>
          <p class="p2">{{ v.retail_price.toFixed(2) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetTipList } from "@/request/api";
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      value3: "a",
      NewTipsList: "",
      bool: false,
      con: "",
      option1: [{ text: "综合", value: 0 }],
      option2: [
        { text: "价格由高到低", value: "b" },
        { text: "价格由低到高", value: "c" },
      ],
      option3: [
        { text: "全部", value: "a" },
        { text: "居家", value: "c" },
      ],
    };
  },
  props: ["TipsList", "value", "hisval"],
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "/Details",
        query: {
          id: id,
        },
      });
    },
    // 商品排序
    fun() {
      if (this.value2 === "b") {
        this.con = "desc";
      }
      if (this.value2 === "c") {
        this.con = "asc";
      }
      GetTipList({ keyword: this.value, order: this.con, sort: "price" }).then(
        (res) => {
          console.log(res);
          this.TipsList = res.data.data;
        }
      );
    },
  },
  watch: {
    TipsList: {
      handler(val) {
        this.NewTipsList = val;
      },
    },
  },
};
</script>

<style lang="less">
.product {
  background-color: #fff;
  width: 100%;
  .pro_img {
    width: 48%;
    float: left;
    img {
      width: 1.7rem;
      height: 1.7rem;
    }
  }
  .pro_content {
    text-align: center;
    .p1 {
      font-size: 0.13rem;
      color: #333333;
    }
    .p2 {
      padding-top: 0.1rem;
      color: #8b0000;
      font-size: 0.12rem;
    }
  }
}
</style>